<template>
	<view class="">
		<view class="order">
			<view class="goods_com">
				<view :class="'cu-item1 ' + (index +1 == tabCur1 ? 'active1':'')" v-for="(item, index) in orderStatus1"
					:key="index" @click="tabSelect1(item,index)">
					<view class="" :class="'cu-item '+(index==currentTabCur? 'tab_active':'')">{{item.value}}</view>
				</view>
			</view>
			<view class="goods_com1">
				<view :class="'cu-item2 ' + (index == tabCur2 ? 'active2':'')" v-for="(item, index) in orderStatus2"
					:key="index" @click="tabSelect2(item,index)">
					<view class="padding-top">
						<view class="" style="height: 50rpx;">
							<image class="o_Img" :src="index == tabCur2 ? item.aSrc:item.src" mode="widthFix"></image>
						</view>
						<view class="margin-top-xs text-sm">{{item.value}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order1" v-if="orderList && orderList.length">
			<view v-for="(item,index) in orderList" :key="index" class="order_info" @click="jumpInfo(item.order)">
				<view class="flex">
					<image :src="item.itemList&&item.itemList[0].picUrl?item.itemList[0].picUrl:noPic" mode=""
						class="o_Img"></image>
					<view class="order_item">
						<view class="">
							<view class="text-black font-30 text-bold overflow-1">{{item.name}}</view>
							<view class="">
								<text class="text-gray3">商品名称：</text>
								<text v-if="item.itemList&&item.itemList.length">{{item.itemList[0].spuName}}</text>
							</view>
							<view class="margin-top-sm">
								<text class="text-gray3">订单编号：</text>
								<text>{{item.order.orderNo}}</text>
							</view>
							<view class="margin-top-sm">
								<text class="text-gray3">创建时间：</text>
								<text>{{item.order.createTime}}</text>
							</view>
						</view>
						<view class="flex align-center">
							<view class="order_status1"
								v-if="item.order&&(item.order.status == '1' || item.order.status == '2')">已付款</view>
							<view class="order_status2" v-if="item.order&&item.order.status == '3'">已完成</view>
							<view class="order_status3" v-if="item.order&&item.order.status == '-1'">已退款</view>
							<view class="margin-left-xs" v-if="item.itemList&&item.order&&item.order.status != '-1'">
								<view v-if="item.itemList[0].status=='1'" class="cu-tag round line-red">退款申请中</view>
								<view v-if="item.itemList[0].status=='12'" class="cu-tag round line-brown">拒绝退款</view>
								<view v-if="item.itemList[0].status=='2'" class="cu-tag round line-red">退货退款申请中</view>
								<view v-if="item.itemList[0].status=='21'" class="cu-tag round line-red">同意退货退款/退货中
								</view>
								<view v-if="item.itemList[0].status=='22'" class="cu-tag round line-brown">拒绝退货退款</view>
								<view v-if="item.itemList[0].status=='212'" class="cu-tag round line-brown">收到退货拒绝退款
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-end">
					<view class="">
						<view class="margin-top">
							<text>付款金额(元)：</text>
							<text class="text-black text-bold font-36 margin-top-sm">
								{{item.order.paymentPrice? item.order.paymentPrice.toFixed(2):'0.00'}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require("utils/util.js");
	import api from 'utils/api'

	export default {
		name: 'yc-order-list',
		data() {
			return {
				userInfo: {},
				tabCur1: 1,
				orderStatus1: [{
					value: '推广订单',
					key: '1'
				}, {
					value: '自购订单',
					key: '2'
				}, {
					value: '全部订单',
					key: '3'
				}],
				tabCur2: 0,
				orderStatus2: [{
					value: '已付款',
					src: '../../../static/image/order1.png',
					aSrc: '../../../static/image/a_order1.png',
					key: '0'
				}, {
					value: '已完成',
					src: '../../../static/image/order2.png',
					aSrc: '../../../static/image/a_order2.png',
					key: '1'
				}, {
					value: '已退款',
					src: '../../../static/image/order4.png',
					aSrc: '../../../static/image/a_order4.png',
					key: '2'
				}, {
					value: '已失效',
					src: '../../../static/image/order3.png',
					aSrc: '../../../static/image/a_order3.png',
					key: '3'
				}],
				orderList: [],
				searchParms: {
					page: {
						current: 1,
						size: 10,
					},
					descs: 'create_time',
					leaderUserid: null,
					// startTime: util.getLSevenDay() + ' 00:00:00',
					// endTime: util.getDay(new Date()) + ' 23:59:59',
				},
				loadmore: true
			}
		},
		mounted() {
			this.userInfo = uni.getStorageSync('user_info') || {}
			this.refresh()
		},
		methods: {
			reachBottom() {
				if (this.loadmore) {
					this.searchParms.page.current = this.searchParms.page.current + 1;
					this.getData();
				}
			},
			refresh() {
				// console.log(this.tabCur1, 'this.tabCur1')
				switch (this.tabCur1) {
					case 1:
						this.searchParms.isSpread = 1;
						break
					case 2:
						this.searchParms.isSpread = 0;
						break
					default:
						delete this.searchParms.isSpread
				}
				switch (this.tabCur2) {
					case 0:
						this.searchParms.status = 1;
						this.searchParms.isPay = 1
						break
					case 1:
						this.searchParms.status = 3;
						this.searchParms.isPay = 1
						break
					case 2:
						this.searchParms.status = -1;
						this.searchParms.isPay = 1
						break
					case 3:
						this.searchParms.isPay = 0
						this.searchParms.status = 4;
						break
					default:
						console.log(1111)
				}
				this.loadmore = true;
				this.orderList = [];
				this.searchParms.page.current = 1;
				this.getData();
			},
			// 获取订单数据
			getData() {
				if (this.userInfo.ycRole == 1) {
					this.searchParms.leaderUserid = this.userInfo.id
					this.searchParms.userid = null
				} else {
					this.searchParms.leaderUserid = null
					this.searchParms.userid = this.userInfo.id
				}
				// this.searchParms.userid = 7185
				api.ycOrderList(this.searchParms).then(res => {
					let orderList = res.data.records;
					this.orderList = [...this.orderList, ...orderList];
					console.log(this.orderList, 'this.orderList')
					console.log(orderList.length, this.searchParms.size, 'this.searchParms.size')
					if (orderList.length < this.searchParms.size) {
						this.loadmore = false;
					}
				})
			},
			// 切换榜单
			tabSelect1(item, i) {
				this.tabCur1 = i + 1
				this.tabCur2 = 0
				this.refresh()
			},
			tabSelect2(item, i) {
				this.tabCur2 = i
				this.refresh()
			},
			// 跳转订单列表
			jumpInfo(item) {
				uni.navigateTo({
					url: '/pages/order/order-detail/index?id=' + item.id
				})
			},
		}
	}
</script>

<style scoped>
	.order {
		margin: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 20rpx;
		color: #4E5969;
	}

	.order .active1 {
		color: #FF001F;
		border-bottom: 6rpx solid #FF001F;
	}

	.order .active2 {
		color: #FF001F;
	}

	.goods_com {
		/* height: 60rpx; */
		color: #4E5969;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.goods_com .cu-item {
		padding-bottom: 10rpx;
	}

	.goods_com .tab_active {
		color: #FF001F;
		border-bottom: 6rpx solid #FF001F;
	}

	.goods_com1 {
		/* height: 60rpx; */
		color: #4E5969;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}


	.order .o_Img {
		width: 50rpx;
		max-height: 60rpx;
	}

	.order1 {
		margin: 0 20rpx;
		padding: 30rpx 30rpx 0;
		background-color: #fff;
		color: #4E5969;
		font-size: 24rpx;
		border-radius: 15rpx;
	}

	.order1 .order_info {
		padding: 20rpx;
		margin-bottom: 30rpx;
		border-bottom: 1rpx solid #ebebeb;
	}

	.order1 .order_info:last-child {
		border-bottom: none;
	}

	.order1 .order_info .o_Img {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.order1 .order_info .order_item {
		flex: 1;
		width: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.order1 .order_info .order_item .order_status1 {
		background-image: linear-gradient(#FF7A2F, #FF001F);
		color: #fff;
		display: inline-block;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
	}

	.order1 .order_info .order_item .order_status2 {
		background-image: linear-gradient(#D2E1EB, #439AD7);
		color: #fff;
		display: inline-block;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
	}

	.order1 .order_info .order_item .order_status3 {
		background-image: linear-gradient(#C1C1C1, #606060);
		color: #fff;
		display: inline-block;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
	}

	.order1 .order_info .yBtn {
		background-color: #fff;
		border: 1rpx solid #C9CDD4;
		margin-left: 10rpx;
		padding: 0 10rpx;
		border-radius: 10rpx;
		height: 36rpx;
		line-height: 36rpx;
	}
</style>